<template>
  <div class="content">
    <div class="w">
      <back-btn />
      <div class="avatar mb34 flex-center">
        <div>
          <a-upload
            v-model:file-list="fileList"
            list-type="picture-card"
            name="file"
            :multiple="false"
            :maxCount="1"
            :showUploadList="false"
            accept=".png,.jpg,.jpeg"
            :customRequest="customUpload"
            @change="handleChange"
          >
            <img class="mb12" :src="userStore.logoUrl || defaultHeader" alt="" />
          </a-upload>
          <div class="tac">上传头像</div>
        </div>
      </div>
      <!-- <div class="info-item space-between">
        <div class="label-name">账号</div>
        <div>{{ userStore.userInfo.phone }}</div>
      </div> -->
      <div class="info-item space-between">
        <div class="label-name">名称</div>
        <div class="flex">
          {{ userStore.name }}
          <i @click="openEditName"></i>
        </div>
      </div>
      <div class="info-item space-between">
        <div class="label-name">手机</div>
        <div>{{ userStore.userInfo.phone }}</div>
      </div>
      <div class="info-item space-between">
        <div class="label-name">密码</div>
        <div>******<i @click="openEditPassword"></i></div>
      </div>
      <div class="flex-center">
        <a-button @click="handleLogout">
          <template #icon>
            <i class="logout-icon"></i>
          </template>
          退出登录
        </a-button>
      </div>
    </div>
    <a-modal
      :visible="visible"
      title="编辑名称"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div class="mb8">新名称</div>
      <a-input
        v-model:value="editNewName"
        placeholder="请输入"
        class="formWidth"
        allowClear
        :maxlength="15"
        onkeyup="value=value.replace(/[, ]/g,'')"
        @input="getNumber"
      />
    </a-modal>
    <ChangePassword v-model:visible="changePasswordVisible" :phone="userStore.userInfo.phone" />
  </div>
</template>

<script setup lang="ts">
import { message as msgHelper } from 'ant-design-vue'
import { useUserInfoStore } from '@/stores/modules/userInfo'
import { onMounted, ref } from 'vue'
import { updateUserInfo } from '@/api/user'
import { useRouter } from 'vue-router'
import { apiUpload } from '@/api'
import defaultHeader from '@/static/image/sider/default-header.png'

const getNumber = (obj: any) => {
  obj.target.value = obj.target.value.replace(/[^\u4e00-\u9fa5A-Za-z0-9_]/g, '')
  if(obj.target.value?.length > 15) {
    obj.target.value = obj.target.value.slice(0,15)
  }
  editNewName.value = obj.target.value
}

const userStore = useUserInfoStore()
onMounted(async () => {})

const visible = ref(false)
const confirmLoading = ref(false)
const editNewName = ref('')
const handleOk = async () => {
  if (!editNewName.value) return
  const { data } = await updateUserInfo({ logoUrl: '', name: editNewName.value })
  if (data.code === '200') {
    userStore.setName(editNewName.value)
    handleCancel()
  }
}
const handleCancel = () => {
  editNewName.value = ''
  visible.value = false
}

const openEditName = () => {
  visible.value = true
}

const changePasswordVisible = ref(false)

const openEditPassword = () => {
  changePasswordVisible.value = true
}
const router = useRouter()
function handleLogout() {
  userStore.loginOut().then(() => {
    router.push('/')
  })
}

const fileList = ref([])
const customUpload = async (e: { file: File; onSuccess: Function; onError: Function }) => {
  console.warn(e.file, 'e')
  try {
    const formData = ref(new FormData())
    formData.value.append('file', e.file)
    const {
      data: { entity }
    } = await apiUpload(formData.value)
    if (entity?.url) {
      msgHelper.success('上传成功')
      userStore.setLogoUrl(entity.url)
      await updateUserInfo({ logoUrl: entity.url })
    }
    e.onSuccess(entity, e)
  } catch (error) {
    e.onError(error)
  }
}
const handleChange = () => {}
</script>

<style lang="scss" scoped>
.content {
  background-color: #fff;
  min-height: 100vh;
  .w {
    position: relative;
    width: 800px;
    margin: 0 auto;
    padding-top: 140px;

    .avatar {
      font-size: 18px;
      color: #3d3d3d;
      :deep() {
        .ant-upload.ant-upload-select-picture-card {
          border: unset;
          background-color: unset;
        }
      }
      img {
        display: block;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        box-shadow: 0px 5px 13px 0px rgba(234, 238, 241, 0.4);
      }
    }
    .info-item {
      width: 100%;
      background-color: #f8fafc;
      padding: 20px 24px;
      margin-bottom: 12px;
      color: #0d1c2e;
      font-size: 14px;
      &:nth-last-child(2) {
        margin-bottom: 50px;
      }
      .label-name {
        font-weight: bold;
        color: #0d1c2e;
      }
      i {
        display: inline-block;
        cursor: pointer;
        width: 18px;
        height: 18px;
        margin-left: 6px;
        background: url('@/static/image/icon_edit.png') no-repeat;
        background-size: 100% 100%;
        &:hover {
          background-image: url('@/static/image/icon_edit_ac.png');
        }
      }
    }
    .ant-btn {
      display: flex;
      align-items: center;
      padding: 8px 29px;
      font-size: 14px;
      color: #0d1c2e;
      height: unset;
      border: 1px solid rgba(112, 124, 151, 0.25);
      border-radius: 4px;
      &:hover {
        background-color: #f5f6f8;
      }
      .logout-icon {
        cursor: pointer;
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-right: 6px;
        background: url('@/static/image/icon_quit.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
input::-webkit-input-placeholder {
  color: #707c97;
}

</style>
